<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>批量加密Mac地址</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <link rel="shortcut icon" href="/static/mac.ico"/>
</head>
<body>
<div class="container text-center" id="app">
    <!--提交后碰到错误的弹窗-->
    <div class="alert alert-danger" role="alert" v-if="alert">
        <strong>友情提示！</strong> 提交内容不能为空
    </div>

    <!--提交后碰到错误的弹窗-->
    <div class="alert alert-danger" role="alert" v-if="error_msg!=''">
        <strong>提交失败！</strong> {{ error_msg }}
    </div>

    <!--提交成功的提示-->
    <div class="alert alert-success" role="alert" v-if="show">
        <strong>提交成功！</strong> 你可以查看下面的表格，有每个mac地址加密后的结果
    </div>

    <div id="result" v-if="show">
        <h2>执行结果</h2>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col" class="text-center">Mac地址</th>
                <th scope="col" class="text-center">加密结果</th>
                <th scope="col" class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in items">
                <th scope="row" v-bind:class="item.output=='Err' ? 'text-danger' : 'text-success'">{{ index+1 }}</th>
                <td v-bind:class="item.output=='Err' ? 'text-danger' : 'text-success'">{{ item.mac }}</td>
                <td v-bind:class="item.output=='Err' ? 'text-danger' : 'text-success'">{{ item.output }}</td>
                <td>
                    <button type="button" class="btn btn-primary btn-sm" @click="copyMac(item.output)">复制</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <h3 class="text-center text-warning">{{ topic }}</h3>
    <form class="form-horizontal">
        <div class="form-group">
            <input type="text" class="d-none" value="<?php echo $url;?>" ref='requrl'>
            <textarea class="form-control" rows="20" name="macs" v-model="macs" placeholder="每个Mac地址只要能换行即可">{{ macs }}</textarea>
        </div>
        <div class="form-group row">
            <div class="col-lg-6">
                <button type="button" class="btn btn-default btn-lg" @click.prevent="reset()">重置</button>
            </div>
            <div class="col-lg-6">
                <button type="button" class="btn btn-primary btn-lg" @click.prevent="commit()"
                        v-bind:disabled="btn_disabled?false:true">
                    提交
                </button>
            </div>
        </div>
    </form>
</div>
</body>
</html>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            topic: '批量加密Mac地址',
            macs: '',
            show: false,
            btn_disabled: true,
            alert: false,
            items: [],
            error_msg: ''
        },
        methods: {
            reset() {
                this.macs = '';
                this.show = false;
                this.btn_disabled = true;
                this.alert = false;
            },
            commit() {
                // 请求url
                let url = this.$refs.requrl.value;
                this.btn_disabled = false;
                this.alert = false;
                if (this.macs != '') {
                    this.show = false;
                    this.error_msg = '';
                    axios.post(url, {macs: this.macs}).then((response) => {
                        this.show = true;
                        console.log(response.data)
                        if (response.data.code == 200) {
                            this.items = response.data.result;
                            this.error_msg = '';
                            this.macs = '';
                        } else {
                            this.error_msg = '接口请求异常，请联系开发人员排查';
                        }
                        this.btn_disabled = true;
                    });
                } else {
                    this.alert = true;
                    this.btn_disabled = true;
                }
            },
            copyMac(mac) {
                // 复制到剪贴板
                if (navigator.clipboard && window.isSecureContext) {
                    window.navigator.clipboard.writeText(mac)
                } else {
                    let textArea = document.createElement("textarea");
                    textArea.value = mac;
                    // 使text area不在viewport，同时设置不可见
                    textArea.style.position = "absolute";
                    textArea.style.opacity = '0';
                    textArea.style.left = "-999999px";
                    textArea.style.top = "-999999px";
                    document.body.appendChild(textArea);
                    textArea.focus();
                    textArea.select();
                    new Promise((res, rej) => {
                        // 执行复制命令并移除文本框
                        document.execCommand('copy') ? res(null) : rej();
                        textArea.remove();
                    });
                }
                alert("复制成功！");
            },
        }
    });
</script>